<template>
  <div class="panel">
    <brokenLine :lineType="lineType"></brokenLine>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form
          v-if="showYearOperateF"
          class="head pt20"
          ref="form"
          :model="form"
          label-width="40px"
          style="width: 92%;"
        >
          <el-row type="flex" justify="end" class="filter-box">
            <el-col :span="5">
              <el-form-item label="时间">
                <div class="block time-filter">
                  <el-date-picker
                    v-model="form.time"
                    size="mini"
                    type="year"
                    placeholder="选择年"
                    value-format="yyyy"
                    @change="handleYearOperate()"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="类型">
                <el-select v-model="form.type" placeholder="筛选类型" @change="handleYearOperate">
                  <el-option label="分配量" value="distribute"></el-option>
                  <el-option label="上门量" value="visit"></el-option>
                  <el-option label="签单量" value="sign"></el-option>
                  <el-option label="接单量" value="ordertaking"></el-option>
                  <el-option label="审过量" value="pass"></el-option>
                  <el-option label="提车量" value="pickCar"></el-option>
                  <el-option label="收费量" value="charge"></el-option>
                  <el-option label="收费金额" value="chargeAmount"></el-option>
                  <el-option label="净业绩" value="achievement"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="filter-btn pointer" @click="handleSwitchF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>
        <div class="grid-content-center bg-purple pt20 pl15" id="year-operate"></div>
      </el-col>
    </el-row>
    <pie :pieType="pieType"></pie>
  </div>
</template>

<script>
import { option32, pickerOptions2 } from "@/../config/Stats_options";
import {
  getMonthStartDate,
  getMonthEndDate,
  getFilterMonthLastDay
} from "@/utils/getCurrMonth";
import brokenLine from "@/components/brokenLine";
import pie from "@/components/pie";

export default {
  name: "statistics",
  data() {
    return {
      pickerOptions2,
      year: "",
      form: {
        type: "charge",
        time: "2019"
      },
      pieType: ["buyType", "carType"],
      showYearOperateF: false,
      lineType: ["checkOut", "chargeSum", "achievement"],
      value: [getMonthStartDate(), getMonthEndDate()]
    };
  },
  mounted() {
    this.handleYearOperate();
  },
  methods: {
    handleSwitchF() {
      this.showYearOperateF = !this.showYearOperateF;
    },
    handleYearOperate() {
      option32.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_yearOperate", {
          time: this.form.time,
          type: this.form.type
        })
        .then(data => {
          option32.series[0].data = data;
        })
        .then(() => {
          this.updateYearOperate();
        });
    },
    updateYearOperate() {
      let yearOperate = this.$echarts.init(
        document.getElementById("year-operate")
      );
      yearOperate.setOption(option32, true);
    }
  },
  components: {
    brokenLine,
    pie
  }
};
</script>
<style>
</style>